<!doctype html>
<html>
<head>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta http-equiv="content-type" content="text/html;charset=utf-8">
    <meta content="always" name="referrer">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <#include "../../common/header.html">
</head>
<body>
<!--最外面的灰底框,用于与ifram区别开-->
<div class="col-xs-12 lightgray_div">
    <!--白底框-->
    <div class="col-xs-12 white_div">
        <!--搜索框-->
        <div class="col-xs-12 search_div">
            <div class="input-group g-fr">
                <form id="inquire" class="form-inline ">
                    <div class="input-group ">
                        <select class="form-control" name="role_id" id="role_id">
                        </select>
                    </div>
                    <div class="input-group ">
                        <input type="text" class="form-control" id="gmt_create" placeholder="注册时间">
                        <input type="hidden" id="gmt_create_start" name="gmt_create_start">
                        <input type="hidden" id="gmt_create_end" name="gmt_create_end">
                    </div>

                    <div class="input-group ">
                        <input type="text" class="form-control" name="account" placeholder="账号">
                    </div>
                    <button type="button" class="layui-btn" style="height: 30px" id="btn_search" onclick="table_func.search()"><i
                            class="layui-icon layui-icon-search"></i></button>
                </form>
            </div>
        </div>
        <div class="col-xs-12">
            <div id="table_parent_div" >
                <table id="table_div"  lay-filter="main"></table>
            </div>
        </div>
    </div>
</div>
</body>
<#include "../../common/layui_init.html">
<!--表格工具类的按钮-->
<script type="text/html" id="toolbarBox">
    <div style="margin-bottom: -5px">
        <div class="layui-btn-container " style="float: left;">
            <button class="layui-btn " onclick="table_func.confirm()">
                <i class="layui-icon layui-icon-ok"></i>
                确定
            </button>
            <button class="layui-btn layui-btn-normal" onclick="layui_layer.layer_close_current()">
                <i class="layui-icon layui-icon-close"></i>
                取消
            </button>

        </div>
    </div>
</script>
<script type="text/javascript">
    //表头
    var cols = [[
        {field: 'id', title: 'id', sort: true, type: 'checkbox', fixed: 'left'}
        , {field: 'id', title: 'ID'}
        , {field: 'name', title: '姓名'}
        , {field: 'account', title: '账号'}
        , {field: 'sex', title: '性别'}
        , {field: 'email', title: '邮箱'}
        , {field: 'phone', title: '手机号'}
        , {field: 'role_info', title: '角色'}
        , {field: 'remark', title: '备注'}
        , {
            field: 'gmt_create', title: '创建时间'
            , templet: function (col) {
                return layui_table.date_format(col.gmt_create, "yyyy-MM-dd hh:mm:ss")
            }
        },
        {
            field: 'gmt_create', title: '修改时间'
            , templet: function (col) {
                return layui_table.date_format(col.gmt_modified, "yyyy-MM-dd hh:mm:ss")
            }
        }
    ]]
    //页面要用的方法
    var table_func = {
        //表格初始化
        init: function () {
            //设置表格渲染的参数
            layui_table.set_table_data('${request.contextPath}/user/query', cols, "#toolbarBox");
            //进行表格渲染
            layui_table.table_render();
        },
        //搜索
        search: function () {
            layui_table.search(tool.paraArrayToLiteral($("#inquire").serializeArray()))
        },
        //确定选择
        confirm: function () {
            var id = layui_table.selectOne();
            if(!tool.isEmpty(id)){
                parent.select_user_id=id;
                layui_layer.layer_close_current();
            }
        }
    }
    $(function () {
        //设置表格的属性值
        layui_table.lay_attr = $("#table_div").attr("lay-filter");
        //设置点击表格行,进行选中
        layui_table.click_line_checked_operation(true);
        select2_utils.load_select2_key_id("role_id","请选择所属角色","/admin/role/getAll",{},"name",null,"id","不限角色")
        //渲染日期选择框
        layui_date.range_date_render("#gmt_create", "date", "#gmt_create_start", "#gmt_create_end");
        table_func.init();
    });

</script>
<#include "../../common/footer-inner.html">
</html>
